<%@ page language="java" contentType="text/html" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript" src="../m/js/jquery.min.js"></script>
<script type="text/javascript" src="../m/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="../m/js/cart.js"></script>
<script type="text/javascript" src="../m/js/jquery.msg.src.js"></script>
<title>产品展示</title>
<style type="text/css">
header{ width:100%;}
header img{ width:100%;}
ul li { list-style:none;}
body{height:auto;margin-bottom:8%;margin-top:12.7%;background:url(../m/images/c_shop_bg3.jpg) no-repeat right;}
.clear{ clear:both;}
h1{ font:normal 1em "黑体"; color:#fff;text-align:center;margin-top:3px;}
h2{color:#fff; font-size:14px; font-weight:normal; padding:0 0 0px;text-align:center;line-height:1.8em;margin-top:3px;}
*{ margin:0; padding:0;}
.main{ width:100%; margin:0 auto; overflow:hidden;}
.main .left{ width:25%;float:left; padding:0px 0 165px 0;}
.main .left ul li{ height:40px; line-height:40px; text-align:center;font-family:"黑体"; font-size:1em;}
.main .left ul li a{ text-decoration:none; color:#fff;}
.main .left .menu_ck{background:url(../../m/images/menu_list_ck.png) right;width:120%;}
.main .left .menu_unck{ background:url(../../m/images/menu_list_unck.png) right;width:120%;}
.main .img { width:100%;float:left;}
.main .img img { width:100%; height:150px; }
.main .list { width:50%;float:left; text-align:center;}
.main .list ul li{ background-position:bottom; overflow:hidden; padding:0 0;}
.main .list_right { width:50%;float:right; text-align:center;}
.main .list_right ul li{ background-position:bottom; overflow:hidden; padding:0 0;}
.main .txt{width:100%;  height:100%; margin:0 auto;text-align:left;}
.main .txt .order{ width:45%; float:left;padding-right:10%;}
.main .txt .order img{ width:100%;}
</style>
<script type="text/javascript">
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar');
});
</script>

<!-- 
.main .left{ width:25%;float:left; padding:0px 0 165px 0; border-right:1px solid #494e50;} 中间有根竖线
body{height:auto;margin-bottom:30%;margin-top:12.7%;background:url(../../m/images/c_shop_bg2.png) no-repeat right;
.main .left{ width:25%;float:left; background: url(../../m/images/menu_list_l_bg.png) repeat-y; padding:0px 0 165px 0; border-right:1px solid #494e50;}
.main .list ul li{ background: url(../../m/images/menu_list.png) repeat-x; background-position:bottom; overflow:hidden; padding:0.6em 0;}
.main .left .menu_ck{ background:url(../../m/images/menu_list_ck.png) repeat-x;background-size:contain;}
 -->

 <script type="text/javascript">
//添加进购物车
 function inCart(p){
	if(p.price <= 0)
	{
		$.messager.show("已下架,不能购买!",1000,function(){})
		return;
	}
	 $.cart.put(p);
	 $.messager.show("添加成功!",800,function(){
		 $("#init_count").html($.cart.count());
	 });
 }
 $(function(){
	 $("#init_count").html($.cart.count());
 });
 	$(document).ready(function(e) {
	    var w_height = $("list").height();
		$(".main .left").height(w_height);

	});
 </script>
 
</head>
<body>
		
	<div class="main">
          <div class="list_right">
          	<ul>
          		<c:forEach var="p" items="${foods}" varStatus="var">
          			<c:if test="${1==var.index%2}">
		          		<li style="border-bottom:0px solid #7f8487;border-radius:0.6em; background:url(../m/images/red_food_bg.png) repeat-x;margin-top:5px;margin-right:15px;margin-left:3px;">
		                	<div class="img">
		                	<a href="<c:url value="/rdetail/${p.id }.html"/>">
		                	<img src="${p.images }"></a></div>
		                    <div class="txt">
		                    	<h1>${p.productName } </h1>
		                        <h2>￥${p.price }</h2>
		                        <!-- <div class="order"> <a href="javascript:inCart(${pjsons[var.index] });">
		                        		<img src="../m/images/menu_order.png"> </a> </div>
		                         -->
		                    </div>
		                </li>
	                </c:if>
          		</c:forEach>
          	</ul>          
          </div>
          <div class="list">
          	<ul>
          		<c:forEach var="p" items="${foods}" varStatus="var">
          			<c:if test="${0==var.index%2}">
		          		<li style="border-bottom:0px solid #7f8487;border-radius:0.6em; background:url(../m/images/red_food_bg.png) repeat-x;margin-top:5px;margin-left:15px;margin-right:3px;">
		                	<div class="img"><a href="<c:url value="/rdetail/${p.id }.html"/>"><img src="${p.images }"></a></div>
		                    <div class="txt">
		                    	<h1>${p.productName } </h1>
		                        <h2>￥${p.price }</h2>
		                    </div>
		                </li>
	                </c:if>
          		</c:forEach>
          	</ul>
          </div> 
          
            <div style="width:60%; margin:0 auto;margin-top:10px;">
	    		<c:if test="${enablePage }">
		    		<c:if test="${enableFirst }">
		    			<a href="<c:url value="/rfoods/${id }?page=${prev }"/>"><img src="../m/images/order_pre.png" width="35%" style="margin-top:5%;margin-right:24%;margin-left:2%;"></a>
		    		</c:if>
		    		<c:if test="${!enableFirst }">
		    			<img width="35%" style="margin-right:24%;margin-left:2%;">
		    		</c:if>
		    		<c:if test="${enableLast }">
		    			<a href="<c:url value="/rfoods/${id }?page=${next }"/>"><img src="../m/images/order_next.png" width="35%" style="margin-top:5%;text-align:right;"></a>
		    		</c:if>
		    	</c:if>
	    	</div>               
		            	
    </div>
 
</body>
<%@ include file="footer_red.jsp" %>

 
</html>

